<template>
  <el-card class="storage-card">
    <template #header>
      <div class="card-header">
        <span>存储管理</span>
        <div class="header-actions">
          <el-button type="primary" @click="handleTestConnection" :loading="loading">测试连接</el-button>
          <el-button type="primary" @click="handleSaveSettings" :loading="loading">保存设置</el-button>
        </div>
      </div>
    </template>

    <div class="storage-content">
      <el-form ref="formRef" :model="storageForm" label-width="120px" class="storage-form">
        <div class="form-line">
          <el-form-item label="存储方式" style="width: 200px">
            <el-select v-model="storageForm.type" @change="handleTypeChange">
              <el-option label="本地存储" value="local" />
              <el-option label="对象存储" value="object" />
            </el-select>
          </el-form-item>
          <el-form-item label="服务提供商" style="width: 200px" v-show="storageForm.type === 'object'">
            <el-select v-model="storageForm.provider" @change="handleProviderChange">
              <el-option label="阿里云OSS" value="aliyun" />
              <el-option label="腾讯云COS" value="tencent" />
              <el-option label="七牛云Kodo" value="qiniu" />
              <el-option label="华为云OBS" value="huawei" />
            </el-select>
          </el-form-item>
        </div>

        <div class="form-line">
          <el-form-item :label="accessKeyLabel" style="width: 300px">
            <el-input v-model="storageForm.accessKey" :disabled="storageForm.type === 'local'" />
          </el-form-item>
          <el-form-item :label="secretLabel" style="width: 300px">
            <el-input v-model="storageForm.secret" :disabled="storageForm.type === 'local'" show-password />
          </el-form-item>
          <el-form-item label="区域" style="width: 200px">
            <el-input v-model="storageForm.region" :disabled="storageForm.type === 'local'" />
          </el-form-item>
          <el-form-item label="存储桶" style="width: 200px">
            <el-input v-model="storageForm.bucket" :disabled="storageForm.type === 'local'" />
          </el-form-item>
          <el-form-item label="CDN加速域名" style="width: 300px">
            <el-input v-model="storageForm.cdnDomain" :disabled="storageForm.type === 'local'" />
          </el-form-item>
        </div>
      </el-form>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()
const loading = ref(false)
const formRef = ref()

const storageForm = ref({
  type: 'local',
  provider: '',
  accessKey: '',
  secret: '',
  region: '',
  bucket: '',
  cdnDomain: ''
})

const accessKeyLabel = computed(() => {
  switch (storageForm.value.provider) {
    case 'aliyun':
      return 'AccessKey ID'
    case 'tencent':
      return 'SecretId'
    case 'qiniu':
      return 'AccessKey'
    case 'huawei':
      return 'AccessKey ID'
    default:
      return 'AccessKey'
  }
})

const secretLabel = computed(() => {
  switch (storageForm.value.provider) {
    case 'aliyun':
      return 'AccessKey Secret'
    case 'tencent':
      return 'SecretKey'
    case 'qiniu':
      return 'SecretKey'
    case 'huawei':
      return 'SecretKey'
    default:
      return 'Secret'
  }
})

const handleTypeChange = (value) => {
  if (value === 'local') {
    storageForm.value.provider = ''
    storageForm.value.accessKey = ''
    storageForm.value.secret = ''
    storageForm.value.region = ''
    storageForm.value.bucket = ''
    storageForm.value.cdnDomain = ''
  }
}

const handleProviderChange = () => {
  storageForm.value.accessKey = ''
  storageForm.value.secret = ''
  storageForm.value.region = ''
  storageForm.value.bucket = ''
  storageForm.value.cdnDomain = ''
}

const handleTestConnection = async () => {
  if (storageForm.value.type === 'local') {
    ElMessage.success('本地存储连接测试成功')
    return
  }

  if (!storageForm.value.provider) {
    ElMessage.warning('请选择服务提供商')
    return
  }

  loading.value = true
  try {
    await systemStore.testStorageConnection(storageForm.value)
    ElMessage.success('连接测试成功')
  } catch (error) {
    console.error('测试连接失败:', error)
    ElMessage.error(error.message || '连接测试失败')
  } finally {
    loading.value = false
  }
}

const handleSaveSettings = async () => {
  if (storageForm.value.type === 'object' && !storageForm.value.provider) {
    ElMessage.warning('请选择服务提供商')
    return
  }

  loading.value = true
  try {
    await systemStore.updateStorageConfig(storageForm.value)
    ElMessage.success('保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error(error.message || '保存失败')
  } finally {
    loading.value = false
  }
}

const getStorageConfig = async () => {
  loading.value = true
  try {
    const config = await systemStore.getStorageConfig()
    Object.assign(storageForm.value, config)
  } catch (error) {
    console.error('获取存储配置失败:', error)
    ElMessage.error(error.message || '获取存储配置失败')
  } finally {
    loading.value = false
  }
}

// 页面加载时获取配置
getStorageConfig()
</script>

<style scoped>
.storage-card {
  margin: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.storage-content {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
}

.storage-form {
  width: 100%;
}

.form-line {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.form-line:last-child {
  margin-bottom: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}
</style> 